<template>
  <view
    :class="[
      'zm-input-wrapper w-full h-[86rpx] rounded-2000rpx flex items-center px-30rpx justify-between',
      customClass,
    ]"
    :style="computedStyle"
  >
    <input
      :value="modelValue"
      :placeholder="placeholder"
      :style="customStyle"
      class="zm-input flex-1"
      :placeholder-style="placeholderStyle"
      @input="$emit('update:modelValue', $event.target.value)"
    />

    <template v-if="captcha">
      <view class="captcha flex-1 text-center font-600">{{ captchaText }}</view>
    </template>

    <template v-if="sendCode">
      <view
        class="send-code h-[70rpx] leading-[70rpx] flex-1 text-right font-600 color-#FF4600"
        @click="handleSendCode"
      >
        <text v-if="isCounting">{{ countdown }}s</text>
        <text v-else>{{ sendCodeText }}</text>
      </view>
    </template>

    <template v-if="password">
      <img
        v-if="showPassword"
        src="/static/images/openeyes.png"
        class="w-33rpx h-33rpx"
        alt="Show Password"
        @click="togglePassword"
      />
      <img
        v-else
        src="/static/images/closeeyes.png"
        class="w-33rpx h-33rpx"
        alt="Hide Password"
        @click="togglePassword"
      />
    </template>
  </view>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, computed } from 'vue'

// Props
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: 'Enter text',
  },
  placeholderStyle: {
    type: String,
    default: 'color: #bfc4c8;',
  },
  customStyle: {
    type: String,
    default: 'width: 100%;',
  },
  customClass: {
    type: String,
    default: '',
  },
  backgroundColor: {
    type: String,
    default: '#fff',
  },
  borderColor: {
    type: String,
    default: '#F0F0F0',
  },
  captcha: {
    type: Boolean,
    default: false,
  },
  captchaText: {
    type: String,
    default: 'T2W8',
  },
  sendCode: {
    type: Boolean,
    default: false,
  },
  sendCodeText: {
    type: String,
    default: 'Send verification code',
  },
  password: {
    type: Boolean,
    default: false,
  },
})

// Emits
const emit = defineEmits(['update:modelValue', 'sendCode'])

// Data
const showPassword = ref(true)
const isCounting = ref(false)
const countdown = ref(60)

// Methods
const handleSendCode = () => {
  if (!isCounting.value) {
    emit('sendCode')
    startCountdown()
  }
}

const startCountdown = () => {
  isCounting.value = true
  const interval = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(interval)
      countdown.value = 60
      isCounting.value = false
    }
  }, 1000)
}

const togglePassword = () => {
  showPassword.value = !showPassword.value
}

// Computed properties for dynamic styles
const computedStyle = computed(() => ({
  backgroundColor: props.backgroundColor,
  border: `2rpx solid ${props.borderColor}`,
}))
</script>

<style scoped>
.zm-input-wrapper {
  display: flex;
  align-items: center;
}
.zm-input {
  border: none;
  outline: none;
}
.captcha {
  font-size: 52rpx;
  color: #d5dff5;
}
.send-code {
  cursor: pointer;
}
</style>
